<template>
  <div class="com">
    <van-popup v-model="show" position="bottom" :style="{ height: '75%' }">
      <!-- 头部导航栏 -->
      <div class="topnav">
        <van-nav-bar title="答题卡题">
          <template #right>
            <span style=" color:#d12d3e"> {{ index }} </span>
            <span>/{{ testNum }}题</span>
          </template>
        </van-nav-bar>
        <div class="title-box">共{{ testNum }}题</div>
      </div>
      <div class="main-box">
        <ul>
          <li
            @click="onChoose(subindex)"
            v-for="(subitem, subindex) in testNum"
            :key="subindex"
            :class="{
              right:
                testisTrueList.length !== 0 &&
                testisTrueList[subindex] &&
                testisTrueList[subindex].testindex === subindex &&
                testisTrueList[subindex].err,
              err:
                testisTrueList.length !== 0 &&
                testisTrueList[subindex] &&
                testisTrueList[subindex].testindex === subindex &&
                testisTrueList[subindex].err === false,
              select: index === subindex
            }"
          >
            {{ subindex + 1 }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['testNum', 'index', 'testisTrueList'],
  data () {
    return {
      show: false
    }
  },
  created () {},
  methods: {
    // 选择试题
    onChoose (subindex) {
      this.show = false
      this.$emit('chooseTset', subindex)
    }
  }
}
</script>

<style lang="less">
.com {
  .topnav {
    .title-box {
      font-size: 14px;
      color: #b4b4bd;
      background-color: #f7f4f5;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
    }
  }
  .main-box {
    padding: 30px 30px 0px 30px;
    li {
      float: left;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      text-align: center;
      line-height: 34px;
      border: 1px solid #b4b4bd;
      font-size: 14px;
      color: #b4b4bd;
      margin-right: 17px;
      margin-bottom: 20px;
    }
    .right {
      background: #ddfad9;
      border: none;
    }
    .err {
      font-weight: 400;
      color: #ff4949;
      background: #ffefea;
      border: none;
    }
    .select {
      border: 1px solid #000;
    }
  }
}
</style>
